<template>
  <div>
    <van-card @click="$router.push('/detail/'+row.houseCode)">
      <template #title>
        <h3 class="my-title">{{row.title}}</h3>
      </template>
      <template #thumb>
        <van-image
          width="106"
          height="80"
          fit="fill"
          :src="'http://liufusong.top:8080'+row.houseImg"
        />
      </template>
      <template #desc>
        <p class="my-desc">{{row.desc}}</p>
      </template>
      <template #tags>
        <span v-for="(item,index) in row.tags" :key="index" class="my-tag">{{item}}</span>
      </template>
      <template #price>
        <span class="my-price">{{row.price}}</span
        ><span style="color: red"> 元/月</span>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  props: {
    row: {
      type: Object,
      required: true
    }
  },

  data () {
    return {}
  },

  created () {},

  methods: {}
}
</script>

<style scoped lang="less">
.my-title{
  margin: 5px 0;
}
.my-tag {
  color: #39becd;
  background: #e1f5f8;
  display: inline-block;
  font-size: 12px;
  border-radius: 3px;
  padding: 4px 5px;
  margin-right: 5px;
  line-height: 12px;
}
.my-desc {
  font-size: 12px;
  color: #afb2b3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  margin: 5px;
}
.van-card__thumb {
  width: auto;
}
.my-price {
  font-size: 16px;
  color: #fa5741;
  font-weight: bolder;
}
</style>
